<template>
  <div :style="styleSheet">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    styles: {
      type: Object,
    },
  },
  computed: {
    activeHeight: function () {
      var docElement = document.documentElement; //获取到html的根元素
      var clientHeight = docElement.clientHeight; //获取到可视区域的高度
      var clientWidth = docElement.clientWidth; //获取到可视区域的宽度
      if (!clientWidth) return; //容错判断 没有找到可视区宽度  直接return

      var fontSize = 20 * (clientWidth / 320);  //可视区域的宽度除于设计稿的宽度320再乘于20，获取到1rem等于多少

      if (this.$route.meta.isShowNav) { //判断this.$route.isShowNav为true时，可视区域的高度减去导航栏的高度
        clientHeight -= 3.2 * fontSize;
      }

      if (this.$route.meta.isShowTab) { //判断this.$route.isShowTab为true时，可视区域的高度减去底部栏的高度
        clientHeight -= 3.2 * fontSize;
      }
      return clientHeight / fontSize + "rem";
    },
    styleSheet: function () {
      return {
        marginTop: this.$route.meta.isShowNav ? "3.2rem" : "0rem",
        marginBottom: this.$route.meta.isShowTab ? "3.2rem" : "0rem",
        height: this.activeHeight,
        ...this.styles,
      };
    },
  },
};
</script>

<style scoped>
</style>